<template>
    <div>
      <!-- 按钮打开图标选择器弹框 -->
       <div @click="showIconPicker = true">
        <slot name="trigger" >选择图标</slot>
       </div>
        
        
      <!-- 图标选择器弹出框 -->
      <el-dialog
        title="选择图标"
        :visible.sync="showIconPicker"
        width="80%"
        :before-close="handleClose"
      >
        <div class="icon-picker">
          <div v-for="icon in icons" :key="icon" class="icon-item" @click="selectIcon(icon)">
            <i :class="icon" class="icon" />
          </div>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        showIconPicker: false, // 控制弹出框的显示与隐藏
        selectedIcon: '', // 当前选中的图标
        icons: [
          "el-icon-info", "el-icon-error", "el-icon-success", "el-icon-warning",
          "el-icon-question", "el-icon-back", "el-icon-arrow-left", "el-icon-arrow-down",
          "el-icon-arrow-right", "el-icon-arrow-up", "el-icon-caret-left", "el-icon-caret-right",
          "el-icon-caret-bottom", "el-icon-caret-top", "el-icon-delete", "el-icon-search",
          "el-icon-edit", "el-icon-share", "el-icon-upload", "el-icon-download",
          "el-icon-document", "el-icon-setting", "el-icon-user", "el-icon-date",
          // ...你可以继续添加所有图标
        ]
      };
    },
    methods: {
      selectIcon(icon) {
        this.selectedIcon = icon; // 选择图标
        this.showIconPicker = false; // 关闭选择器弹框
        this.$emit('selectIcon', icon)
      },
      handleClose(done) {
        this.showIconPicker = false;
        done();
      }
    }
  };
  </script>
  
  <style scoped>
  .icon-picker {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 每行6个图标 */
    grid-gap: 16px;
    overflow-y: scroll;
    max-height: 400px;
  }
  
  .icon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  .icon {
    font-size: 36px;
    color: #333;
  }
  
  .icon-item:hover .icon {
    color: #409EFF; /* 鼠标悬停时高亮 */
  }
  </style>
  